<template>
  <div>
    <div>
    <el-input v-model="params.team_port" placeholder="请输入端口号" style="width: 200px; margin-left: 50px"></el-input>
    <el-button type="warning" style="margin-left: 5px" @click="findBySearch()">查询</el-button>
    <el-button type="primary" style="margin-left: 5px" @click="reset()">清空</el-button>
      <el-button @click="back()">返回</el-button>
    <el-button type="warning" style="margin-left: 750px" @click="add()">团队登记</el-button>
      <el-button type="primary" :disabled="!hasSelectedRows" @click="updateSelected()">编辑</el-button>
      <el-button type="danger" :disabled="!hasSelectedRows" @click="delSelected()">删除</el-button>


    </div>
    <div>

    <el-table
        :data="tableData"
        style="width: 100%"
        ref="teamTable"
        @selection-change="handleSelectionChange"
      >
      <el-table-column type="selection" width="50"></el-table-column>
      <el-table-column
          prop="team_id"
          label="团队ID"
          width="120"
      ></el-table-column>
      <el-table-column
          prop="team_type"
          label="团队类型"
          sortable
          width="150"
          :filters="[
          { text: '数据准备团队', value: '数据准备团队' },
          { text: '大数据处理团队', value: '大数据处理团队' },
          { text: 'AI团队', value: 'AI团队' },
          { text: '其他', value: '其他' }
        ]"
          :filter-method="filterHandler"
      ></el-table-column>
      <el-table-column
          prop="team_name"
          label="团队名称"
          width="110"
      ></el-table-column>
      <el-table-column
          prop="team_leader"
          label="团队负责人"
          width="110"
      ></el-table-column>
      <el-table-column
          prop="team_ip_address"
          label="团队IP地址"
          width="200"
      ></el-table-column>
      <el-table-column
          prop="team_port"
          label="团队端口号"
          width="200"
      ></el-table-column>
      <el-table-column
          prop="team_members"
          label="团队成员"
          width="200"
      ></el-table-column>
      <el-table-column
          prop="team_capability"
          label="团队能力描述"
          width="120"
      ></el-table-column>
      <el-table-column
          prop="is_enabled"
          label="启用标识"
          width="120"
          :formatter="formatEnabledFlag"
      ></el-table-column>
<!--      <el-table-column label="操作">-->
<!--        <template v-slot:default="scope">-->
<!--          <el-button type="primary" @click="update(scope.row.team_id)">编辑</el-button>-->
<!--          <el-button type="danger" @click="del(scope.row.team_id)">删除</el-button>-->
<!--        </template>-->
<!--      </el-table-column>-->
    </el-table>
    </div>
    <div style="margin-top: 10px">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="params.pageNum"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="params.pageSize"
          layout="total, sizes, prev, pager, next"
          :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import request from "@/utils/request";


export default {
  data() {
    return {
      total: 0,
      form:{},
      params: {
        team_port:'',
        pageNum:1,
        pageSize:5
      },
      tableData: [],
    };
  },
  created(){
    this.findBySearch();
  },
  methods: {
    other(team_id){
      this.$router.push({ name: 'team_details/other', query: { team_id: team_id } });
    },
    bigdata_pro(team_id){
      this.$router.push({ name: 'team_details/bigdata_pro', query: { team_id: team_id } });
    },
    data_pre(team_id){
      this.$router.push({ name: 'team_details/data_pre', query: { team_id: team_id } });
    },
    ai(){
      this.$router.push('team_details/team_type');
    },
    del(team_id){
      request.delete("http://localhost:9100/data_factory/team_details/delete/" + team_id).then(res=>{
        if (res.code ==='0'){
          this.$message({
            message: '删除成功',
            type: 'success'
          });
          this.findBySearch()
        }else {
          this.$message({
            message: res.msg,
            type: 'error'
          });
        }
      })

    },
    back() {
      this.$router.go(-1);
    },
    update(team_id){
      // 发送数据的页面
      this.$router.push({ name: 'team_details/update', query: { team_id: team_id } });
      // this.$router.push({name :'team_details/update', params:{team_id:team_id}})
    },
    add(){
      this.$router.push('team_details/add')
    },
    submit(){

    },
    handleCurrentChange(pageNum){
    this.params.pageNum = pageNum;
    this.findBySearch();
    },
    handleSizeChange(pageSize){
    this.params.pageSize = pageSize;
    this.findBySearch();
    },
    reset(){
      this.params = {
        team_port: '',
        pageNum: 1,
        pageSize: 5
      }

      this.findBySearch();
    },
    hasSelectedRows(){
      // 计算属性来判断是否有选中的行
      return this.multipleSelection.length > 0;
    },
    updateSelected() {
      if (this.multipleSelection.length > 0) {
        // 假设我们只允许一次编辑一个项目，所以取第一个选中的项目
        const team_id = this.multipleSelection[0].team_id;
        this.update(team_id); // 调用原有的update方法
      }
    },
    delSelected() {
      if (this.multipleSelection.length > 0) {
        // 可以批量删除或逐个删除，这里以逐个删除为例
        this.multipleSelection.forEach(row => {
          this.del(row.team_id); // 调用原有的del方法
        });
        // 清空选中状态，因为删除后原来的选中项已经不存在了
        this.multipleSelection = [];
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val; // 更新选中的行数组
    },
    findBySearch(){
      request.get("http://localhost:9100/data_factory/team_details",{
            params:this.params

      }).then(res =>{
        if (res.code === '0'){
          this.tableData = res.data.list;
          this.total =res.data.total;
          //接收的数据.渲染在了上面element组件的表格里
        }else {

        }
      })
    },
    filterHandler(value, row, column) {
      const property = column['property'];
      return row[property] === value;
    }
  }
};
</script>

<style scoped>

</style>